<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-12 14:13:45
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-18 19:57:28
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\dishmana\dishesclass\index.vue
-->
<template>
  <div class="dishesclass flex">
    <pb-card height="100%" width="100%" padding="0">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- <el-tab-pane label="自助称重" name="first"></el-tab-pane> -->
        <!-- <el-tab-pane label="小碗菜" name="second"></el-tab-pane> -->
      </el-tabs>
      <pb-card padding="0" height="100%">
        <div class="content-box">
          <div class="table-box flex">
            <div class="left-tree-box">
              <!-- <pb-tree :style="{ maxHeight: treeH }" @nodeClick="nodeClick" class="custom-tree" :treeData="skuTreeData"
                :defaultProps="treeProps"></pb-tree> -->
              <pb-tree @nodeClick="nodeClick" :style="{ maxHeight: treeH }" class="custom-tree" :treeData="treeData"
                :defaultProps="treeProps"></pb-tree>
            </div>
            <div class="table-right">
              <pb-table :column="spuColumn" :tableData="dishTypeData" :bottomElement="['pb-page']">
                <template #operate="{ row }">
                  <!-- <p class="divider mr-2 ml-2"></p> -->
                  <pb-button size="small" text @click="setisVisibleFn(true, row)"
                    v-hasPerm="'center:dish:edit'">编辑</pb-button>
                </template>
              </pb-table>
              <pb-pagination @onChange="currentChange" v-model:currentPage="pageObj.currentPage"
                v-model:pageSize="pageObj.pageSize" :total="pageObj.total"></pb-pagination>
            </div>
          </div>
        </div>
      </pb-card>
      <pb-popup v-model="isVisible" Width="480" :title="'编辑菜品分类'" @cancelFn="offisVisibleFn" @confirmFn="setUserData">
        <div class="Frompopup">
          <div class="top">
            <span>类别编码：</span><span>{{ UpdataFrom.dishTypeCode }}</span>
          </div>
          <el-form :model="UpdataFrom" label-width="auto" :inline="true" class="Forms" :rules="UpdataFormRules"
            ref="ruleFormRef" label-position="top">
            <el-form-item label="类别名称" prop="dishTypeName">
              <pb-input v-model="UpdataFrom.dishTypeName" placeholder="" :width="132" />
            </el-form-item>
            <el-form-item label="父级类别">
              <pb-select v-model="UpdataFrom.parentDishTypeCode" width="398" placeholder="请选择父级类别" keys="dishTypeCode"
                label="dishTypeName" :options="parentDishTypeList" :disabled="true" />
            </el-form-item>
            <el-form-item label="备注">
              <pb-input v-model="UpdataFrom.dishTypeDesc" placeholder="" :width="432" type="textarea" />
            </el-form-item>
          </el-form>
        </div>
      </pb-popup>
    </pb-card>
  </div>
</template>

<script setup lang="ts">
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import type { FormInstance } from 'element-plus'
import { getDishTypeApi, getDishClassListApi, editDishTypeApi } from '@/api/Dashmana'
const activeName = ref('first')
const ruleFormRef = ref<FormInstance>()
const parentDishTypeList = ref([])
const UpdataFrom = reactive({
  dishTypeName: '',
  parentDishTypeName: '',
  dishTypeDesc: '',
  dishTypeCode: '',
  dishTypeId: '',
  parentDishTypeCode: ''
})
const UpdataFormRules = reactive({
  dishTypeName: [
    { required: true, message: '请输入主食', trigger: 'blur' },
  ],
  // parentDishTypeCode: [
  //   { required: true, message: '请选择父级类别', trigger: 'change' },
  // ],
})
const handleClick = async (tab: any, event: Event) => {
  activeName.value = tab.props.name
  nodeCode.value = ''
  await getNodeDishType()
  pageObj.currentPage = 1
  pageObj.pageSize = 10
  getDataFn()
}
const isVisible = ref(false)
const nodeCode = ref('')
const treeData = ref([] as any)
const treeProps = { children: "children", label: "dishTypeName" };
const dishTypeData = ref([
]);
const spuColumn = reactive([
  {
    key: "dishTypeCode",
    width: 100,
    name: "类别编码",
    align: "right",
  },
  {
    key: "dishTypeName",
    width: 120,
    name: "类别名称",
  },
  {
    key: "parentDishTypeName",
    name: "父级类别",
  },
  {
    key: "createTime",
    name: "创建时间",
    align: "right",
  },
  {
    key: "dishTypeDesc",
    name: "备注",
  },
  {
    slot: "operate",
    name: "操作",
  },
]);
const setisVisibleFn = async (Bl: boolean, row: any) => {
  Object.assign(UpdataFrom, row)
  getDishClassListApi({
    "currentPage": 1,
    "pageSize": -1,
    "parentDishTypeCode": "",
    type: activeName.value == 'first' ? 'weight' : 'smallBowl',
    "dishTypeLevel": 1
  }).then(res => {
    parentDishTypeList.value = res.data.records
  })
  isVisible.value = true
}
const offisVisibleFn = () => {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields(); // 重置表单并清除校验规则
  }
}
const setUserData = async () => {
  if (ruleFormRef.value) {
    await ruleFormRef.value.validate((valid) => {
      if (valid) {
        // 提交表单
        editDishTypeApi({
          "dishTypeId": UpdataFrom.dishTypeId,
          "dishTypeName": UpdataFrom.dishTypeName,
          "parentDishTypeCode": UpdataFrom.parentDishTypeCode,
          "dishTypeDesc": UpdataFrom.dishTypeDesc
        }).then((res: any) => {
          if (res.code == 2000) {
            createMessage({
              message: '编辑成功'
            })
            isVisible.value = false
            getNodeDishType()
            getDataFn()
          }
        })
      } else {
        // 处理验证错误
      }
    });
  }
}
const pageObj = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const currentChange = () => {
  getDataFn()
}
const getNodeDishType = () => {
  getDishTypeApi({
    type: activeName.value == 'first' ? 'weight' : 'smallBowl'
  }).then(res => {
    treeData.value = [{
      dishTypeCode: '',
      dishTypeName: '全部',
      children: res.data
    }]
    // treeData.value[0].children = res.data
    getDataFn()
    var height = document.getElementsByClassName("pb-table");
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");
      treeH.value = height[0].offsetHeight + "px";
    });
  })
}
const getDataFn = () => {
  getDishClassListApi({
    currentPage: pageObj.currentPage,
    pageSize: pageObj.pageSize,
    type: activeName.value == 'first' ? 'weight' : 'smallBowl',
    parentDishTypeCode: nodeCode.value
  }).then(res => {
    dishTypeData.value = res.data.records
    pageObj.total = res.data.total
  })
}
const treeH = ref(null);
const nodeClick = (data: any) => {
  nodeCode.value = data.curNode.dishTypeCode;
  getDataFn()
};
onMounted(() => {
  getNodeDishType()
})
</script>
<style lang="scss">
.dishesclass {
  margin-bottom: 0;

  .el-form-item {
    width: 100%;
    margin-bottom: 0;
    margin-top: 24px;
  }

  .el-form-item__content {
    display: block;
  }

  .el-form-item--default .el-form-item__label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    font-style: normal;
    text-transform: none;
  }

  .el-textarea__inner {
    resize: none;
    height: 104px;
  }

  .el-input__inner[type="textarea"]::webkit-resizer {
    display: none;
    /* 这可能不起作用，因为伪元素的名称可能不同 */
  }

  // .el-form-item__label-wrap {
  //   margin-left: 0 !important;
  // }

  .el-upload {
    // background: rgba(0, 0, 0, 0.04);
  }
}
</style>
<style lang="scss">
.dishesclass {
  .el-tabs__header {
    margin-bottom: 2px;
  }

  .el-tabs__nav-wrap {
    padding-left: 16px;
  }
}
</style>
<style lang="scss" scoped>
.dishesclass {
  .left-tree-box {
    padding-top: 0;
  }

  .table-right {
    width: 84%;
    padding: 16px;
    box-sizing: border-box;
  }

  .Frompopup {
    .top {
      margin-top: 8px;

      span:first-child {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.65);
        font-style: normal;
        text-transform: none;
      }

      span:last-child {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        font-style: normal;
        text-transform: none;
      }
    }

    .footers {
      margin-bottom: 8px;
    }
  }
}
</style>